<template>
<view class='uni-icon' :style='style' />
</template>

<script setup lang="ts">
  import { IconProps } from '../props'
  import { useIconfont } from '../useIconfont'
  import { computed } from 'vue'
  const props = defineProps(IconProps)
  const {
  colors,
  svgSize,
  quot,
  isStr,
  } = useIconfont(props)
  const style = computed(() => {
      return `background-image: url(${quot.value}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize.value}px' height='${svgSize.value}px'%3E%3Cpath d='M512 1024c-56.096-89.344-97.184-137.728-123.296-145.184C201.216 825.248 64 652.672 64 448 64 200.576 264.576 0 512 0s448 200.576 448 448c0 203.168-135.232 374.72-320.608 429.632-26.88 7.968-69.376 56.768-127.392 146.368z m108.32-356A67.84 67.84 0 0 0 688 736a67.84 67.84 0 0 0 67.68-68A67.84 67.84 0 0 0 688 600a67.84 67.84 0 0 0-67.68 68z m-379.104 0A67.84 67.84 0 0 0 308.928 736a67.84 67.84 0 0 0 67.68-68 67.84 67.84 0 0 0-67.68-68 67.84 67.84 0 0 0-67.712 68z m-60.48-231.744S160 465.44 160 491.2v136c0 14.976 12.16 27.2 27.072 27.2h26.912c6.656-46.848 46.464-83.136 94.944-83.136 48.448 0 88.256 36.256 94.912 83.104l189.216 0.032c6.656-46.848 46.464-83.136 94.944-83.136 48.48 0 88.288 36.288 94.944 83.136h53.984A27.2 27.2 0 0 0 864 627.2V219.2a27.2 27.2 0 0 0-27.072-27.2H403.68a27.2 27.2 0 0 0-27.072 27.2V300.8H281.856c-19.904 0-28.256 12.224-40.64 27.2l-60.48 108.256z m168.8 54.944H205.344c0-6.784 5.472-15.648 10.56-23.104l56.96-106.464s6.08-6.432 10.432-6.432h66.24v136z' fill='${(isStr.value ? colors.value : colors.value[0]) || 'rgb(190,190,190)'}' /%3E%3C/svg%3E${quot.value}); width: ${svgSize.value}px; height: ${svgSize.value}px;`
  })
</script>
